import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { BidirectionalBar } from '@ant-design/plots';

const CompareChart = (prop: any) => {
  const data = [
    {
      country: '论文',
      团队1: 13.4,
      团队2: 12.3,
    },
    {
      country: '横向项目',
      团队1: 14.4,
      团队2: 6.3,
    },
    {
      country: '纵向项目',
      团队1: 18.4,
      团队2: 8.3,
    },
    {
      country: '申请专利',
      团队1: 34.4,
      团队2: 13.8,
    },
    {
      country: '授权专利',
      团队1: 44.4,
      团队2: 19.5,
    },
    {
      country: '奖励',
      团队1: 24.4,
      团队2: 18.8,
    },
    {
      country: '专著',
      团队1: 54.4,
      团队2: 24.7,
    },
    {
      country: '标准',
      团队1: 104.4,
      团队2: 5.3,
    },
    {
      country: '成果转化',
      团队1: 165.2,
      团队2: 72.9,
    },
  ];
  const config = {
    data: prop.data || data,
    xField: prop.xField,
    xAxis: {
      position: 'bottom',
    },
    interactions: [
      {
        type: 'active-region',
      },
    ],
    yField: prop.yField,
    tooltip: {
      shared: true,
      showMarkers: false,
    },
  };
  return <BidirectionalBar {...config} />;
};

export default CompareChart;
